<template>
  <div id="home">
    <header>
        <h1>饿了么</h1>
        <input type="text" placeholder="输入商家、商品名称">
    </header>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" height="300px">
        <van-swipe-item v-for="(item,index) in img" :key="index" >
            <img v-lazy="item" height="100%" width="100%" />
        </van-swipe-item>
    </van-swipe>

    <List></List>
  </div>
</template>

<script>
import List from '@/components/List.vue';
export default {
    components:{List},
    
    data(){
        return {
            img:["https://tse2-mm.cn.bing.net/th/id/OIP-C.r5064-oa4fuMlb5YtD2jCwHaE7?w=268&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"
        ,"https://tse1-mm.cn.bing.net/th/id/OIP-C.qIpcZOhCVNQT49aA02HqngHaE7?w=278&h=186&c=7&r=0&o=5&dpr=1.1&pid=1.7"
    ,"https://tse4-mm.cn.bing.net/th/id/OIP-C.CA62XQ6CC7B74Jk7ovmKKQHaE7?w=279&h=186&c=7&r=0&o=5&dpr=1.1&pid=1.7"
    ,"https://tse3-mm.cn.bing.net/th/id/OIP-C.SkWpAy4gPoob7ch0SNem1AHaFB?w=273&h=184&c=7&r=0&o=5&dpr=1.1&pid=1.7"
    ]
        }
    },
}   
</script>

<style>
    header{
        background-color: blueviolet;
    }
    header h1{
        color: white;
        font-weight: 400;
        margin: 0 0 5px 15px;
    }
    header input{
        width: 95%;
        margin: 8px;
        border: none;
        height: 35px;
        background-color: aliceblue;
        border-radius: 35px;
        text-align: center;
    }
    .my-swipe{
        height:150px;
        width: 96%;
        margin: 10px auto;
        border-radius:20px;
    }
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
        
    }
</style>